<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { UserInfo } from '@/types/user'
import { getUserInfo } from '@/services/user'

// 获取用户信息且渲染
const user = ref<UserInfo>() // 准备一个接收用户信息的响应式数据

// 什么时候发请求数据
onMounted(async () => {
  const res = await getUserInfo()
  user.value = res.data
})
</script>

<template>
  <div class="personal-page">
    <!-- nav组件 -->
    <cp-nav-bar title="个人资料" right-text="完成" />
    <!-- 个人资料 -->
    <!-- 头像 -->
    <div class="avatar">
      <van-image round fit="cover" :src="user?.avatar" width="30vw" position="center" />
    </div>

    <van-cell-group>
      <van-cell title="昵称" :value="user?.account" />
      <van-cell title="性别" value="男" />
      <van-cell title="手机号" :value="user?.mobile" />
      <van-cell title="关注" :value="user?.likeNumber" />
    </van-cell-group>
  </div>
</template>

<style lang="scss" scoped>
.personal-page {
  padding: 46px 20px 80px;
  .avatar {
    margin-left: 100px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
}
</style>
